<template>
	<view>
		<!-- 模糊图片 -->
		<view class="position-relative">
			<image 
			:src="info.cover" 
			mode="aspectFill"
			class="w-100 filter"></image>
		</view>
		<!-- 话题介绍 -->
		<view class="topic-intro position-relative bg-white px-2 pb-2">
			<view class="flex">
				<image 
				:src="info.cover"
				class="topic-avator rounded mr-2">
				</image>
				<text class="font-md">#{{ info.title }}#</text>
			</view>
			<view class="flex align-center font text-secondary mt-1">
				<text class="mr-2">动态：{{ info.news_count }}</text>
				<text>今日：{{ info.today_count }}</text>
			</view>
			<view class="font-md text-secondary">
				{{ info.desc }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['info']
	}
</script>

<style scoped>
.topic-intro {
	z-index: 10;
}
.filter {
	height: 300rpx;
	filter: blur(10px);
}
.topic-avator {
	width: 150rpx;
	height: 150rpx;
	margin-top: -75rpx;
}
</style>